<template>
    <div class="yContainerRowCenter yMatch" style="overflow: hidden">
        <!-- 侧滑菜单 -->
        <el-menu class="el-menu-vertical-demo yMatch_h" style="border: none;overflow:auto" background-color="#545c64" text-color="#fff" :collapse="isCollapse">
            <!-- 第1层 -->
            <el-sub-menu :index="menuModel.id" v-for="(menuModel) in menuModels" :key="menuModel.id">
                <template #title>
                    <el-icon>
                        <grid/>
                    </el-icon>
                    <span>{{ menuModel.title }}</span>
                </template>
                <!-- 第2层 -->
                <div v-for="(subItem) in menuModel.subItems" :key="subItem.id">
                    <div v-if="subItem.route !== ''">
                        <el-menu-item :index="subItem.id" @click="click_go(subItem.route)">{{ subItem.title }}</el-menu-item>
                    </div>
                    <div v-else>
                        <el-sub-menu :index="subItem.id">
                            <template #title>
                                <el-icon>
                                    <Menu/>
                                </el-icon>
                                <span>{{ subItem.title }}</span>
                            </template>
                            <!-- 第3层 -->
                            <div v-for="(subSubItem) in subItem.subItems" :key="subSubItem.id">
                                <div v-if="subSubItem.route !== ''">
                                    <el-menu-item :index="subSubItem.id" @click="click_go(subSubItem.route)">{{ subSubItem.title }}</el-menu-item>
                                </div>
                                <div v-else>
                                    <el-sub-menu :index="subSubItem.id">
                                        <template #title>
                                            <el-icon>
                                                <MoreFilled/>
                                            </el-icon>
                                            <span>{{ subSubItem.title }}</span></template>
                                        <!-- 第4层 -->
                                        <div v-for="(subSubSubItem) in subSubItem.subItems" :key="subSubSubItem.id">
                                            <el-menu-item :index="subSubSubItem.id" @click="click_go(subSubSubItem.route)">
                                                <span>{{ subSubSubItem.title }}</span>
                                            </el-menu-item>
                                        </div>
                                    </el-sub-menu>
                                </div>
                            </div>
                        </el-sub-menu>
                    </div>
                </div>
            </el-sub-menu>
        </el-menu>
        <div class="yContainerColumnCenter yWeight yMatch_h">
            <!-- 标题栏 -->
            <el-header class="yContainerRowCenter_v yMatch_w" style="background: white;padding: 0;height: 50px">
                <div class="yMatch_h">
                    <el-button class="yContainerRowCenter" :icon="isCollapse ? 'Expand' : 'Fold'" style="height: 100%;padding:0 10px;border:none;font-size: 20px" @click="click_toggleSlide">
                        <div style="font-size: 14px">{{ isCollapse ? '展开' : '收起' }}</div>
                    </el-button>
                </div>
                <div style="width: 1px;height:50%;background: lightgrey;margin-left:5px;margin-right: 10px"></div>
                <!-- 导航 -->
                <el-link type="primary" icon="HomeFilled" :underline="false" @click="goHome()">首页</el-link>
                <span v-if="!isHome()" style="margin-left: 10px;margin-right: 10px;">/</span>
                <el-breadcrumb v-if="!isHome()" class="yWeight" separator-icon="ArrowRight">
                    <el-breadcrumb-item class="yContainerRowCenter_v" style="overflow: hidden" v-for="(titleRoute) in titleRoutes" :key="titleRoute">{{ titleRoute }}</el-breadcrumb-item>
                </el-breadcrumb>
                <div v-else class="yWeight"/>
                <!-- 个人信息 -->
                <el-dropdown @command="click_command" trigger="click">
                    <div class="yContainerRowCenter" style="padding: 10px;">
                        <el-icon>
                            <Avatar/>
                        </el-icon>
                        <span style="margin-right: 10px">欢迎使用{{ yFree.webName }}，{{ userModel.name }}</span>
                        <el-icon>
                            <CaretBottom/>
                        </el-icon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="user_home">返回首页</el-dropdown-item>
                            <el-dropdown-item command="user_logout">用户注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-button :icon="yFree.yIsEmpty(curPage)?'Loading':'Refresh'" type="warning" style="margin-right: 10px;color: white;font-size: 20px;padding: 5px;" circle @click="refreshCurPage"/>
            </el-header>
            <!-- 历史功能 -->
            <div v-if="menuModels_history.length > 0" class="yContainerRowCenter_v yMatch_w" style="background: white;padding: 5px;margin-top: 1px;">
                <el-link type="danger" :underline="false" @click="click_history_clear" style="margin-right: 5px;">
                    <el-tag type="danger" key="deleteAll" size="large">
                        <el-icon>
                            <delete/>
                        </el-icon>
                    </el-tag>
                </el-link>
                <el-link v-for="menuModel_history in menuModels_history" :key="menuModel_history.id" :underline="false">
                    <el-tag closable type="info" size="large" @click="click_go(menuModel_history.route)" @close="click_history_close(menuModel_history.id)" style="margin-right: 5px;">
                        {{ menuModel_history.title }}
                    </el-tag>
                </el-link>
            </div>
            <!-- 主体 -->
            <div class="yWeight yMatch div_container" style="padding: 10px;overflow: auto;background: #EEEEEE">
                <component :is="curPage"></component>
                <el-backtop target=".div_container"></el-backtop>
            </div>
        </div>
    </div>
</template>

<script>
import Pages from '../../Pages.js'

let $this, yFree, Global, IJkid, IFinal, AppUtils;

export default {
    components: Pages,
    data() {
        return {
            isCollapse: false, // 菜单状态
            curPage: '', // 主功能
            userModel: {}, // 用户数据
            menuModels: [], // 菜单列表
            menuModels_history: [], // 历史功能
            titleRoutes: [], // 导航
        }
    },
    beforeCreate() {
        $this = this, yFree = $this.yFree, Global = $this.Global, IJkid = $this.IJkid, IFinal = $this.IFinal, AppUtils = $this.AppUtils;
    },
    created() {
        $this.userModel = AppUtils.readUserModel();
        $this.menuModels_history = yFree.yReadObj(`${IFinal.SaveKey.menuModels_history}_${Global.AppUtils.readUserModel().uid}`);
        if ($this.menuModels_history == null) $this.menuModels_history = [];
        $this.initMenu();
        $this.goHome();
    },
    methods: {
        initMenu() {
            $this.menuModels = yFree.yFromJson($this.userModel.menuModels);
            if ($this.menuModels == null || $this.menuModels.length <= 0) {
                yFree.yShowBuilder("当前用户无任何权限，请注销", (isConfirm) => {
                    if (isConfirm) yFree.yIntent(IFinal.Page.index, 0);
                }, false, "注销");
                return;
            }
            $this.menuModels.forEach((menuModel, index) => {
                menuModel.id = `${index}`;
                if (menuModel.subItems.length > 0)
                    menuModel.subItems.forEach((subItem, subIndex) => {
                        subItem.id = `${index}-${subIndex}`;
                        if (subItem.subItems.length > 0)
                            subItem.subItems.forEach((subSubItem, subSubIndex) => {
                                subSubItem.id = `${index}-${subIndex}-${subSubIndex}`;
                                if (subSubItem.subItems.length > 0)
                                    subSubItem.subItems.forEach((subSubSubItem, subSubSubIndex) => {
                                        subSubSubItem.id = `${index}-${subIndex}-${subSubIndex}-${subSubSubIndex}`;
                                    });
                            });
                    });
            });
        },
        goHome() {
            $this.curPage = "";
            yFree.yRunOnDelay(0, () => $this.curPage = "home");
        },
        isHome() {
            return $this.curPage === "home";
        },
        click_toggleSlide() {
            $this.isCollapse = !$this.isCollapse;
        },
        click_command(command) {
            switch (command) {
                case "user_logout":
                    yFree.yShowBuilder("确定注销吗？", (isConfirm) => {
                        if (isConfirm) yFree.yIntent(IFinal.Page.index, 0);
                    }, true, "注销");
                    break;
                case "user_home":
                    $this.goHome();
                    break;
            }
        },
        click_go(page) {
            $this.curPage = page;
            $this.titleRoutes = [];
            let curMenuModel;
            $this.menuModels.forEach((menuModel, index) => {
                if (menuModel.subItems != null && menuModel.subItems.length > 0) {
                    menuModel.subItems.forEach((subItem, subIndex) => {
                        if (subItem.subItems != null && subItem.subItems.length > 0) {
                            subItem.subItems.forEach((subSubItem, subSubIndex) => {
                                if (subSubItem.subItems != null && subSubItem.subItems.length > 0) {
                                    subSubItem.subItems.forEach((subSubSubItem, subSubSubIndex) => {
                                        if (subSubSubItem.route === page) {
                                            $this.titleRoutes.push(menuModel.title);
                                            $this.titleRoutes.push(subItem.title);
                                            $this.titleRoutes.push(subSubItem.title);
                                            $this.titleRoutes.push(subSubSubItem.title);
                                            curMenuModel = subSubSubItem;
                                        }
                                    });
                                } else {
                                    if (subSubItem.route === page) {
                                        $this.titleRoutes.push(menuModel.title);
                                        $this.titleRoutes.push(subItem.title);
                                        $this.titleRoutes.push(subSubItem.title);
                                        curMenuModel = subSubItem;
                                    }
                                }
                            });
                        } else {
                            if (subItem.route === page) {
                                $this.titleRoutes.push(menuModel.title);
                                $this.titleRoutes.push(subItem.title);
                                curMenuModel = subItem;
                            }
                        }
                    });
                } else {
                    if (menuModel.route === page) {
                        $this.titleRoutes.push(menuModel.title);
                        curMenuModel = menuModel;
                    }
                }
            });
            let had = false;
            $this.menuModels_history.forEach((menuModel_history) => {
                if (menuModel_history.id === curMenuModel.id) had = true;
            });
            if (!had) $this.menuModels_history.push(curMenuModel);
            yFree.ySaveObj(`${IFinal.SaveKey.menuModels_history}_${Global.AppUtils.readUserModel().uid}`, $this.menuModels_history);
        },
        click_history_close(id) {
            $this.menuModels_history.forEach((menuModel_history) => {
                if (menuModel_history.id === id) $this.menuModels_history.remove(menuModel_history);
            });
            yFree.ySaveObj(`${IFinal.SaveKey.menuModels_history}_${Global.AppUtils.readUserModel().uid}`, $this.menuModels_history);
        },
        click_history_clear() {
            yFree.yShowBuilder("确定清空历史吗？", (isConfirm) => {
                if (isConfirm) {
                    $this.menuModels_history = [];
                    yFree.yDelete(`${IFinal.SaveKey.menuModels_history}_${Global.AppUtils.readUserModel().uid}`);
                }
            }, true, "清空");
        },
        refreshCurPage() {
            let page = $this.curPage;
            $this.curPage = "";
            yFree.yRunOnDelay(100, () => $this.curPage = page);
        },
    },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 250px;
}
</style>
